<template>
  <div>
  <el-form ref="form" :model="form" label-width="80px" :label-position="labelPosition">
    <el-form-item label="姓名" v-show="control === '1'">
      <el-input v-model="form.name"></el-input>
    </el-form-item>
    <el-form-item v-show="control === '2'">
      <el-upload
          class="upload-demo"
          ref="upload"
          action="https://jsonplaceholder.typicode.com/posts/"
          :on-remove="handleRemove"
          :on-success="onSuccessSubmit"
          :on-error="onErrorSubmit"
          :file-list="fileList"
          :limit="1"
          :auto-upload="false">
        <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
      </el-upload>
    </el-form-item>
    <el-form-item label="内容标题" v-show="control === '3'">
      <el-input v-model="form.title"></el-input>
    </el-form-item>
    <el-form-item label="内容文本" v-show="control === '3'">
      <el-input type="textarea" v-model="form.desc"></el-input>
    </el-form-item>
  </el-form>
  <el-button type="primary" @click="onSubmit">下一步</el-button>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'test',
  data() {
    return {
      control: '1',
      form: {
        name: '',
        title:'',
        desc: '',
        pic: ''
      },
      fileList: []
    }
  },
  methods: {
    onSubmit() {
      switch (this.control){
        case "1":
          this.control = '2';
          break;
        case '2':
          this.control = '3';
          break;
        case '3':
          this.control = '0';
          this.submitUpload();
          break;
      }
    },
    submitUpload() {
      this.$refs.upload.submit();
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    onSuccessSubmit(){
      this.form.pic = '返回token'
      axios
        .post('https://jsonplaceholder.typicode.com/posts/', this.form)
        .then(response => (this.info = response))
        .catch(function (error) { // 请求失败处理
          console.log(error);
        });
    },
    onErrorSubmit(...a){
      console.log(...a);
    },
  },
  computed:{
    labelPosition(){
      return this.control !== '2' ? 'left' : 'top'
    }
  },
}
</script>

